<template>
  <!-- form表单 -->
  <el-form label-width="80px" ref="form" :model="form">
    <el-row>
      <!-- 学科 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="学科">
            <el-select
              v-model="form.subject"
              placeholder="请选择"
              @change="selectSubject(form.subject)"
            >
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in subjectSimpleList"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <!-- 二级目录 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="二级目录">
            <el-select v-model="form.catalogID" placeholder="请选择">
              <el-option
                :label="item.directoryName"
                :value="item.directoryName"
                v-for="item in directoryScreen"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <!-- 标签 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="标签">
            <el-select v-model="form.tag" placeholder="请选择">
              <el-option
                :label="item.tagName"
                :value="item.tagName"
                v-for="item in tagsScreen"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <!-- 关键字 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="关键字">
            <el-input
              v-model="form.keyword"
              placeholder="根据题干搜索"
            ></el-input>
          </el-form-item></div
      ></el-col>
      <!-- 试题类型 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="试题类型">
            <el-select v-model="form.questionType" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in questionType"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <!-- 难度 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="难度">
            <el-select v-model="form.difficulty" placeholder="请选择">
              <el-option
                :label="item.label"
                :value="item.value"
                v-for="item in difficulty"
                :key="item.value"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <!-- 方向 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="方向">
            <el-select v-model="form.direction" placeholder="请选择">
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in direction"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <!-- 录入人 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="录入人">
            <el-select v-model="form.creatorID" placeholder="请选择">
              <el-option
                :label="item.username"
                :value="item.username"
                v-for="item in userList"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <!-- 题目备注 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="题目备注">
            <el-input v-model="form.remarks"></el-input>
          </el-form-item></div
      ></el-col>
      <!-- 企业简称 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="企业简称">
            <el-input v-model="form.shortName"></el-input>
          </el-form-item></div
      ></el-col>
      <!-- 城市 -->
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item label="城市">
            <el-select
              v-model="form.province"
              placeholder="请选择"
              style="width: 48%; margin-right: 2%"
              @change="selectArea(form.province)"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="(item, index) in provinces"
                :key="index"
              >
              </el-option>
            </el-select>
            <el-select
              v-model="form.city"
              placeholder="请选择"
              style="width: 50%"
            >
              <el-option
                :label="item"
                :value="item"
                v-for="item in area"
                :key="item"
              ></el-option>
            </el-select>
          </el-form-item></div
      ></el-col>
      <el-col :span="6"
        ><div class="grid-content bg-purple">
          <el-form-item style="text-align: right">
            <el-button @click="close">清除</el-button>
            <el-button type="primary" @click="search">搜索</el-button>
          </el-form-item>
        </div></el-col
      >
    </el-row>
  </el-form>
</template>

<script>
import { provinces, citys } from '@/api/hmmm/citys.js'
import { direction, questionType, difficulty } from '@/api/hmmm/constants.js'
import { subjectsSimple } from '@/api/hmmm/subjects.js'
import { directorysList } from '@/api/hmmm/directorys'
import { tagsList } from '@/api/hmmm/tags.js'
import { userList } from '@/api/base/users.js'
import { questionsList } from '@/api/hmmm/questions.js'
// import { companysList } from '@/api/hmmm/companys.js'
export default {
  props: {
    queryObj: {
      type: Object
    }
  },
  data () {
    return {
      form: {
        // 学科
        subject: '',
        // 目录
        catalogID: '',
        // 标签
        tag: '',
        // 试题类型
        questionType: '',
        // 难度
        difficulty: '',
        // 方向
        direction: '',
        // 录入人
        creatorID: '',
        // 城市
        province: '',
        // 地区
        city: '',
        // 企业简称
        shortName: '',
        // 题目备注
        remarks: '',
        // 关键字
        keyword: ''
      },

      //   queryObj: {
      //     page: 1,
      //     pagesize: 10
      //     // // 学科
      //     // subjectID: '',
      //     // // 难度
      //     // difficulty: '',
      //     // // 试题类型
      //     // questionType: '',
      //     // // 标签名称
      //     // tags: '',
      //     // // 企业所在地省份
      //     // province: '',
      //     // // 企业所在城市
      //     // city: '',
      //     // // 关键字
      //     // keyword: '',
      //     // // 题目备注
      //     // remarks: '',
      //     // // 企业简称
      //     // shortName: '',
      //     // // 方向
      //     // direction: '',
      //     // // 录入人
      //     // creatorID: '',
      //     // // 目录
      //     // catalogID: ''
      //   },
      //   学科列表数据
      subjectSimpleList: [],
      //   二级目录数据
      directorysList: [],
      //   标签数据
      tagsList: [],
      //   用户列表数据
      userList: [],
      //   方向
      direction,
      //   题型
      questionType,
      //   难度
      difficulty,
      //   城市列表
      provinces: [],
      //   地区列表
      area: [],
      questionsList: [],

      total: ''
    }
  },
  async created () {
    // 学科
    const { data } = await subjectsSimple()
    this.subjectSimpleList = data

    // 二级目录请求获得counts再一次发起请求获得全部数据
    const {
      data: { counts: directorysCounts }
    } = await directorysList()
    //   请求二级目录全部数据
    const {
      data: { items }
    } = await directorysList({ pagesize: directorysCounts })
    this.directorysList = items

    //   请求标签数据
    const {
      data: { counts: num }
    } = await tagsList()

    const {
      data: { items: tags }
    } = await tagsList({ page: 1, pagesize: num })
    this.tagsList = tags

    // 请求用户列表数据
    const {
      data: { counts: userCounts }
    } = await userList()
    const {
      data: { list: userlist }
    } = await userList({ pagesize: userCounts })
    this.userList = userlist
    // 城市列表数据
    this.provinces = provinces()
  },
  methods: {
    // 学科改变请求二级目录标签数据
    async selectSubject (value) {
      this.form.catalogID = null
      this.form.tag = null
    },
    // 城市发生改变获取地区数据
    selectArea (value) {
      this.form.city = ''
      this.area = citys(value)
    },
    // 清除表单
    close () {
      for (const k in this.form) {
        this.form[k] = ''
      }
    },
    // 搜索方法
    async search () {
      const res = await questionsList({
        page: this.queryObj.page,
        pagesize: this.queryObj.pagesize,
        subjectID: this.form.subject,
        difficulty: this.form.difficulty,
        questionType: this.form.questionType,
        tags: this.form.tags,
        province: this.form.province,
        city: this.form.city,
        direction: this.form.direction,
        creatorID: this.form.creatorID,
        catalogID: this.form.catalogID,
        keyword: this.form.keyword,
        remarks: this.form.remarks,
        shortName: this.form.shortName
      })
      this.$emit('search', res)
    }
  },
  computed: {
    //   将学科相对应的二级目录数据筛选出来
    directoryScreen () {
      return this.directorysList.filter(
        item => item.subjectID === this.form.subject
      )
    },

    //   将学科相对应的标签数据筛选出来
    tagsScreen () {
      return this.tagsList.filter(item => item.subjectID === this.form.subject)
    }
  }
}
</script>

<style scoped lang="less">
// 输入框高度
/deep/.el-input--medium .el-input__inner {
  height: 32px;
  line-height: 32px;
}
// btn 按钮
/deep/ .el-button--medium {
  padding: 9px 15px;
  font-size: 12px;
}
// form表单
.el-form {
  .el-form-item {
    margin-bottom: 18px;
    /deep/ .el-form-item__label {
      width: 80px;
      line-height: 32px;
    }
    /deep/ .el-form-item__content {
      margin-left: 80px;
      line-height: 32px;
      /deep/ .el-select--medium {
        width: 100%;
        /deep/ .el-input--medium {
          font-size: 13px;
          //   输入框
          /deep/ .el-input__inner {
            height: 32px;
            line-height: 32px;
          }
        }
      }
    }
  }
}
</style>
